<template>
  <div v-for="(node, index) in processList" :key="index" class="flow-node">
    <h3>
      {{ node.nodeType }}（{{ node.approvalType }}） -
      <span :class="{ current: node.current }">{{ node.status }}</span>
    </h3>
    <ul>
      <li v-for="handler in node.handlers" :key="handler.userid">
        <span :class="{ active: handler.isCurrent }">
          {{ handler.userid }}：{{ handler.status }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {fetchApprovalProcess} from '@/api/approve'

const processList = ref([])
let detailJsonFromBackend = {
  "errcode": 0,
  "errmsg": "ok",
  "info": {
    "sp_no": "202507010030",
    "sp_name": "凤凰庄审批通用模板",
    "sp_status": 1,
    "template_id": "C4c5FcJ9eyx8L7dmGXBUHu6R7Efz3UppSrsKziBep",
    "apply_time": 1751360490,
    "applyer": {
      "userid": "TianQiLi",
      "partyid": "5"
    },
    "sp_record": [
      {
        "sp_status": 1,
        "approverattr": 1,
        "details": [
          {
            "approver": {
              "userid": "LongMaoLin"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "LiCaiQi"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "ShiQuan"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "ChenXingChi"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "ZhengPeng"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          },
          {
            "approver": {
              "userid": "TianQiLi"
            },
            "speech": "",
            "sp_status": 1,
            "sptime": 0,
            "media_id": []
          }
        ]
      }
    ],
    "notifyer": [],
    "apply_data": {
      "contents": [
        {
          "control": "Text",
          "id": "Text-1749708121814",
          "title": [
            {
              "text": "类型",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "sale_order_approve",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Text",
          "id": "Text-1749727352938",
          "title": [
            {
              "text": "类型名称",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "销售订单审批",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Money",
          "id": "Money-1749708130512",
          "title": [
            {
              "text": "金额",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "new_money": "200.00",
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Textarea",
          "id": "Textarea-1749708135103",
          "title": [
            {
              "text": "备注",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "{\"销售订单单据编号\":\"XSDD202507010016\"}",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        },
        {
          "control": "Text",
          "id": "Text-1749723357253",
          "title": [
            {
              "text": "业务主键",
              "lang": "zh_CN"
            }
          ],
          "value": {
            "text": "1939972597693566977",
            "tips": [],
            "members": [],
            "departments": [],
            "files": [],
            "children": [],
            "stat_field": [],
            "sum_field": [],
            "related_approval": [],
            "students": [],
            "classes": [],
            "docs": [],
            "wedrive_files": []
          },
          "require": 0
        }
      ]
    },
    "comments": [],
    "process_list": {
      "node_list": [
        {
          "node_type": 1,
          "sp_status": 1,
          "apv_rel": 2,
          "sub_node_list": [
            {
              "userid": "LongMaoLin",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "LiCaiQi",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "ShiQuan",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "ChenXingChi",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "ZhengPeng",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            },
            {
              "userid": "TianQiLi",
              "speech": "",
              "sp_yj": 1,
              "sptime": 0,
              "media_ids": []
            }
          ]
        }
      ]
    },
    "batch_applyer": []
  }
};
onMounted(async () => {
  fetchApprovalProcess(JSON.stringify(detailJsonFromBackend)).then(res=>{
    processList.value = res.data
  })

})
</script>

<style scoped>
.current {
  color: red;
}

.active {
  font-weight: bold;
}
</style>